<template>
  <div id="colorGumutLine"
       style="width: 100%; height: 400px" />
</template>
<script>
import { border } from "@/views/deviceManage/components/chart/border";
import * as echarts from "echarts"
export default {
  name: "Spectrogram",
  props: {
    chartData: null
  },
  data() {
    return {
      borders: border,
      chart: null
    };
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
    this.$nextTick(() => {
      this.createEcharts(this.chartData);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resizeHandler() {
      this.chart.resize();
    },
    createEcharts(data) {
      let newBorder = this.division(this.borders, 3);
      this.getOrdi(newBorder, 1);
      this.getOrdi(newBorder, 2);
      const gamout = [];
      const Y = 0.24;
      const colors = [];
      for (let i = 0; i < 1; i += 0.003) {
        for (let j = 0; j < 1; j += 0.006) {
          // let inner = {}

          if (!this.isInPolygon([i, j], newBorder)) {
            continue;
          }
          gamout.push([i, j]);
          const XYZ = this.Yxy2XYZ(Y, i, j);
          const color = this.XYZ2RGB(XYZ.X, Y, XYZ.Z);
          colors.push(`rgb(${color.r},${color.g},${color.b})`);
        }
      }

      newBorder = this.genPolygon(newBorder);
      newBorder.push([0.17556, 0.005294], [0.73469, 0.26531]);
      this.$nextTick(() => {
        this.chart = echarts.init(this.$el);
        this.chart.setOption({
          xAxis: {
            name: "x",
            min: 0,
            max: 0.8,
            interval: 0.1,
          },
          yAxis: {
            name: "y",
            min: 0,
            max: 0.9,
            interval: 0.1,
          },

          series: [
            {
              name: "scatter",
              type: "scatter",

              large: true,
              largeThreshold: 1000000,
              symbolSize: 3,
              itemStyle: {
                normal: {
                  color: function (val) {
                    return colors[val.dataIndex];
                  },
                },
              },
              data: gamout,
              zlevel: 1,
            },
            {
              data: newBorder,
              type: "line",
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: "rgba(0,0,0,0.5)",
              },
            },
            {
              data: [data],
              type: "effectScatter",
              showSymbol: true,
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                color: "#333"
              },
              rippleEffect: {
                period: 1.5,
                scale: 4
              },
              // lineStyle: {
              //   color: "rgba(0,0,0,1)",
              //   width: 1,
              // },
              zlevel: 2,
            },
          ],
        });
      });


    },
    genPolygon(border) {
      for (let i = 0; i < border.length; i++) {
        border[i].splice(0, 1);
      }
      return border;
    },
    isInPolygon(checkPoint, polygonPoints) {
      let counter = 0;
      let i;
      let xinters;
      let p1, p2;
      const pointCount = polygonPoints.length;
      p1 = polygonPoints[0];

      for (i = 1; i <= pointCount; i++) {
        p2 = polygonPoints[i % pointCount];
        if (
          checkPoint[0] > Math.min(p1[1], p2[1]) &&
          checkPoint[0] <= Math.max(p1[1], p2[1])
        ) {
          if (checkPoint[1] <= Math.max(p1[2], p2[2])) {
            if (p1[1] !== p2[1]) {
              xinters =
                ((checkPoint[0] - p1[1]) * (p2[2] - p1[2])) / (p2[1] - p1[1]) +
                p1[2];
              if (p1[2] === p2[2] || checkPoint[1] <= xinters) {
                counter++;
              }
            }
          }
        }
        p1 = p2;
      }
      if (counter % 2 === 0) {
        return false;
      } else {
        return true;
      }
    },
    getOrdi(array, pos) {
      const new_array = [];
      for (let i = 0; i < array.length; i++) {
        new_array.push(array[i][pos]);
      }
      return new_array;
    },
    division(arr, length) {
      const oldArray = [...arr];
      const index = 0;
      const newArray = [];
      while (index < oldArray.length) {
        newArray.push(oldArray.splice(index, length));
      }
      return newArray;
    },
    Yxy2XYZ(Y, x, y) {
      const X = x * (Y / y);
      const Z = (1 - x - y) * (Y / y);
      return {
        X,
        Y,
        Z,
      };
    },
    XYZ2RGB(x, y, z) {
      let dr, dg, db;
      dr = 0.4185 * x - 0.1587 * y - 0.0828 * z;
      dg = -0.0912 * x + 0.2524 * y + 0.0157 * z;
      db = 0.0009 * x - 0.0025 * y + 0.1786 * z;

      let max = 0;
      max = dr > dg ? dr : dg;
      max = max > db ? max : db;

      dr = (dr / max) * 255;
      dg = (dg / max) * 255;
      db = (db / max) * 255;

      dr = dr > 0 ? dr : 0;
      dg = dg > 0 ? dg : 0;
      db = db > 0 ? db : 0;

      if (dr > 255) {
        dr = 255;
      }
      if (dg > 255) {
        dg = 255;
      }
      if (db > 255) {
        db = 255;
      }
      const r = dr + 0.5;
      const g = dg + 0.5;
      const b = db + 0.5;
      return {
        r,
        g,
        b,
      };
    },
  },
};
</script>
